<template>
  <div class="container">
    <!-- <component :is="current?current:'Home'" class="content"></component> -->
    <router-view class="content" />
    <TabBar v-show="tabbars == 1 ? true : false"></TabBar>
  </div>
</template>

<script>
import TabBar from "./components/TabBar.vue";

//vuex 的一系列方法
import { mapGetters, mapState } from "vuex";
import CourseDetails from "./views/course/details";
export default {
  name: "App",
  components: {
    TabBar,
    /*     Cart,
    Home,
    List,
    User,
    Course,
    Search, */
  },
  data() {
    return {
      current: this.currents,
      tabbar: this.tabbars,
    };
  },
  computed: {
    ...mapGetters(["page"]),
    ...mapState(["currents", "tabbars"]),
  },
  methods: {
    changePage(page) {
      this.$store.commit("changePage", page);
      // this.current = this.page;
    },
  },
  watch: {
    currents(l) {
      this.current = l;
    },
  },
};
</script>

<style lang="scss">
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow: auto;
  }
}
</style>
